<template>
    <rx-dialog  @cancel="cancel" :showok="false">
       <div  style="background: white;height: 70px;padding: 10px;border-bottom:1px solid #ddd;">
           <a-form-model :form="form">
               <a-row>
                   <a-col :span="24">
                       <a-form-item :label="i18n('form.userGroup','用户组')"   :labelCol="labelCo" :wrapper-col="wrapperCo">
                           <rx-input-button  @click="selectGroups">
                           </rx-input-button>
                       </a-form-item>
                   </a-col>
               </a-row>
           </a-form-model>
       </div>
            <rx-layout style="height: calc(100% - 80px)">
                <div slot="left" width="220" showButton="true">
                    <a-directory-tree
                        :multiple="false"
                        :treeData="treeDataList"
                        @select="onSelectList"
                    >
                    </a-directory-tree>
                </div>
                <div class="tablist" slot="center">
                    <div>
                        <a-directory-tree
                            :multiple="false"
                            :treeData="treeDataGroup"
                            @select="onSelectGroup"
                        >
                        </a-directory-tree>
                    </div>
                    <div>
                        <a-tabs style="height: 100% ;width: calc(100% - 20px);margin-left: 10px" defaultActiveKey="buttonField" :tabBarStyle="{borderBottom:0}">
                            <a-tab-pane forceRender :tab="i18n('form.buttonPower','按钮权限')" key="buttonField">
                                <rx-grid ref="table_button" :selectRowKeys="selectRowButtonKeys" :dataSource="grantButtons"
                                         :columns="grantButtonColumns" :allowRowSelect="true" :multiSelect="true" :showPage="false"
                                         :bordered="true" id-field="btnName">
                                </rx-grid>
                            </a-tab-pane>

                            <a-tab-pane forceRender :tab="i18n('form.dataPermission','数据权限')" key="dataList">
                                <rx-grid ref="table_list" :selectRowKeys="selectRowListKeys" :dataSource="grantLists"
                                         :columns="grantColumns" :allowRowSelect="true" :multiSelect="true" :showPage="false"
                                         :bordered="true">
						<span slot="op" slot-scope="{text,record,index,blur}">
							<a-select style="width:100%;" labelInValue v-model="record.op"
                                      @blur="blur(index,'op',text,record)">
								<a-select-option value="=">{{i18n('options.equal','等于')}}</a-select-option>
								<a-select-option value="in">{{i18n('options.range','范围')}}</a-select-option>
							</a-select>
						</span>
                                    <span slot="scope" slot-scope="{text,record,index,blur}">
							<a-select style="width:100%;" v-if="record.type=='user' && record.op=='='" labelInValue
                                      v-model="record.scope" @blur="blur(index,'scope',text,record)">
								<a-select-option value="SELF">{{i18n('options.oneself','自己')}}</a-select-option>
								<a-select-option value="DUP_USERS">{{i18n('options.dupUsers','直属上级用户')}}</a-select-option>
								<a-select-option value="UP_USERS">{{i18n('options.upUsers','所有上级用户')}}</a-select-option>
								<a-select-option value="DDOWN_USERS">{{i18n('options.ddownUsers','直属下级用户')}}</a-select-option>
								<a-select-option value="DOWN_USERS">{{i18n('options.downUsers','所有下级用户')}}</a-select-option>
							</a-select>
							<a-select style="width:100%;" v-if="record.type=='group' && record.op=='='" labelInValue
                                      v-model="record.scope" @blur="blur(index,'scope',text,record)">
								<a-select-option value="SELF_DEP">{{i18n('options.selfDep','默认部门')}}</a-select-option>
								<a-select-option value="DUP_DEPS">{{i18n('options.dupDeps','直属上级部门')}}</a-select-option>
								<a-select-option value="UP_DEPS">{{i18n('options.upDeps','所有上级部门')}}</a-select-option>
								<a-select-option value="DDOWN_DEPS">{{i18n('options.ddownDeps','本部门及下级部门')}}</a-select-option>
								<a-select-option value="DOWN_DEPS">{{i18n('options.downDeps','所有下级部门')}}</a-select-option>
							</a-select>
							<a-select style="width:100%;" v-if="record.type=='inst' && record.op=='='" labelInValue
                                      v-model="record.scope" @blur="blur(index,'scope',text,record)">
								<a-select-option value="SELF_TENANT">{{i18n('options.selfTenant','作者机构')}}</a-select-option>
								<a-select-option value="DUP_TENANTS">{{i18n('options.dupTenants','上级机构')}}</a-select-option>
								<a-select-option value="UP_TENANTS">{{i18n('options.upTenants','所有上级机构')}}</a-select-option>
								<a-select-option value="DDOWN_TENANTS">{{i18n('options.ddownTenants','直属下级机构')}}</a-select-option>
								<a-select-option value="DOWN_TENANTS">{{i18n('options.downTenants','所有下级机构')}}</a-select-option>
							</a-select>
							<a-input style="width:100%;" v-model="record.scope" @blur="blur(index,'scope',text,record)"
                                     v-if="record.type=='field' && record.op=='=' && (record.dataType==null || record.dataType=='string' || record.dataType=='varchar' || record.dataType=='clob')" />
							<a-input-number style="width:100%;" v-model="record.scope"
                                            @blur="blur(index,'scope',text,record)"
                                            v-if="record.type=='field' && record.dataType=='number'" />
							<a-date-picker style="width:100%;" showTime format="YYYY-MM-DD"
                                           @change="gridChangeDate($event,$event,{record:record,dataIndex:'scope',format:'YYYY-MM-DD'})"
                                           @ok="blur(index,'scope',text,record)"
                                           v-if="record.type=='field' && record.dataType=='date'" />
							<rx-input-button style="width:100%;"
                                             @click="selUserData($event,{field:'scope',text:text,record:record,index:index,blur:blur})"
                                             v-if="record.type=='user' && record.op=='in'" />
							<rx-input-button style="width:100%;"
                                             @click="selGroupData($event,{field:'scope',text:text,record:record,index:index,blur:blur})"
                                             v-if="record.type=='group' && record.op=='in'" />
							<rx-input-button style="width:100%;"
                                             @click="selTenantData($event,{field:'scope',text:text,record:record,index:index,blur:blur})"
                                             v-if="record.type=='inst' && record.op=='in'" />
							<rx-input-button style="width:100%;"
                                             @click="rangSetDlg($event,{field:'scope',text:text,record:record,index:index,blur:blur})"
                                             v-if="record.type=='field' && record.op=='in' && (record.dataType==null || record.dataType=='string' || record.dataType=='varchar' || record.dataType=='clob')" />
						</span>
                                    <span slot="scope2" slot-scope="{text,record,index,blur}">
							<a-input-number style="width:100%;" v-model="record.scope2"
                                            @blur="blur(index,'scope2',text,record)"
                                            v-if="record.type=='field' && record.op=='in' && record.dataType=='number'" />
							<a-date-picker style="width:100%;" showTime format="YYYY-MM-DD"
                                           @change="gridChangeDate($event,$event,{record:record,dataIndex:'scope2',format:'YYYY-MM-DD'})"
                                           @ok="blur(index,'scope2',text,record)"
                                           v-if="record.type=='field' && record.op=='in' && record.dataType=='date'" />
							<a-select style="width:100%;" mode="tags" labelInValue :options="getSelectData(record)"
                                      @change="gridChangeSelect($event,record,'scope2')"
                                      @blur="blur(index,'scope2',text,record)"
                                      v-if="record.scope=='selfData' && record.type=='field' && record.op=='in' && (record.dataType==null || record.dataType=='string' || record.dataType=='varchar' || record.dataType=='clob')" />
							<rx-select style="width:100%;" :multiSelect="true" :labelInValue="true"
                                       @change="gridChangeSelect($event,record,'scope2')"
                                       @blur="blur(index,'scope2',text,record)"
                                       ajaxType="post" :url="'/api-form/form/core/formCustomQuery/queryForJson_'+record.configs.sql"
                                       data-field="data" :valueField="record.configs.valueField"
                                       :textField="record.configs.textField"
                                       v-if="record.scope=='sql' && record.type=='field' && record.op=='in' && (record.dataType==null || record.dataType=='string' || record.dataType=='varchar' || record.dataType=='clob')" />
							<rx-select style="width:100%;" :multiSelect="true" :labelInValue="true"
                                       @change="gridChangeSelect($event,record,'scope2')"
                                       @blur="blur(index,'scope2',text,record)"
                                       :url="'/api-system/system/core/sysDic/getByAlias?alias='+record.configs.dic+'&i18nTransform=true'"
                                       value-field="value" text-field="name"
                                       v-if="record.scope=='dic' && record.type=='field' && record.op=='in' && (record.dataType==null || record.dataType=='string' || record.dataType=='varchar' || record.dataType=='clob')" />
							<rx-input-button style="width:100%;"
                                             @click="showDialog($event,{field:'scope2',text:text,record:record,index:index,blur:blur})"
                                             v-if="record.scope=='dialog' && record.type=='field' && record.op=='in' && (record.dataType==null || record.dataType=='string' || record.dataType=='varchar' || record.dataType=='clob')" />
						</span>
                                </rx-grid>
                            </a-tab-pane>
                            <a-tab-pane forceRender :tab="i18n('form.fieldPermiss','字段权限')" key="dataField">
                                <rx-grid ref="table_field" :selectRowKeys="selectRowFieldKeys" :dataSource="grantFields"
                                         :columns="grantFieldColumns" :allowRowSelect="true" :multiSelect="true" :showPage="false"
                                         :bordered="true" id-field="field">
                                </rx-grid>
                            </a-tab-pane>

                            <a-tab-pane forceRender :tab="i18n('form.userGroup','用户组')" key="previewSql">
                                <div class="SQL"> {{groupNames}}</div>
                            </a-tab-pane>
                        </a-tabs>
                    </div>
                </div>
            </rx-layout>
    </rx-dialog>
</template>
<script>
    import FormBoPmtApi from '@/api/form/core/formBoPmt';
    import FormBoListApi from "@/api/form/core/formBoList";
    import FormBoPmtDialog from "./FormBoPmtDialog";
    import {
        BaseForm,
        Dialog,
        Util
    } from "@lowcode/jpaas-common-lib";


    export default {
        name: 'FormBoPmtGroupPermission',
        mixins: [BaseForm],
        components: {
            Dialog
        },
        props: {
            type: {
                type: String,
                default: "",

            },
        },
        data() {
            return {
                treeDataList:[],
                treeDataGroup:[],
                labelCo: {
                    span: 2
                },
                wrapperCo: {
                    span: 14
                },
                groupId: '',
                groupNames: '',
                name: '',
                pmtId: '',
                boListId: '',
                boListName: '',
                boListKey: '',
                selectRowButtonKeys: [],
                selectRowListKeys: [],
                selectRowFieldKeys: [],
                grantButtons: [],
                grantLists: [],
                grantFields: [],
                grantButtonColumns: [{
                    title: this.i18n('form.buttonName','按钮名称'),
                    dataIndex: 'btnLabel',
                    width: 180
                }, {
                    title: this.i18n('form.buttonMark','按钮标识'),
                    dataIndex: 'btnName',
                    width: 180
                }],
                grantFieldColumns: [{
                    title: this.i18n('form.fieldName','字段名称'),
                    dataIndex: 'header',
                    width: 180
                }, {
                    title: this.i18n('form.fieldKey','字段Key'),
                    dataIndex: 'field',
                    width: 180
                }],
                grantColumns: [{
                    title: this.i18n('form.permissionType','权限类型'),
                    dataIndex: 'type',
                    displayField: 'type_name',
                    scopedSlots: {
                        customRender: 'type'
                    }
                },
                    {
                        title: this.i18n('form.permissionDesc','权限描述'),
                        dataIndex: 'desc',
                        displayField: 'desc',
                        scopedSlots: {
                            customRender: 'desc'
                        }
                    },
                    {
                        title: this.i18n('form.filterField','筛选字段'),
                        dataIndex: 'field',
                        displayField: 'field_name',
                        scopedSlots: {
                            customRender: 'field'
                        }
                    },
                    {
                        title: this.i18n('form.comparator','比较符'),
                        dataIndex: 'op',
                        displayField: 'op_name',
                        allowCellEdit: true,
                        scopedSlots: {
                            customRender: 'op'
                        }
                    },
                    {
                        title: this.i18n('form.scope1','作用域1'),
                        dataIndex: 'scope',
                        displayField: 'scope_name',
                        allowCellEdit: true,
                        scopedSlots: {
                            customRender: 'scope'
                        }
                    },
                    {
                        title: this.i18n('form.scope2','作用域2'),
                        dataIndex: 'scope2',
                        displayField: 'scope2_name',
                        allowCellEdit: true,
                        scopedSlots: {
                            customRender: 'scope2'
                        }
                    }
                ]

            }
        },
        created() {
            this.initListTree();
            this.initGroupTree();
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"FormBoPmt",key);
            },
            getPmt(pmtId, boListKey) {
                var self = this;
                if (!pmtId) {
                    self.grantButtons=[];
                    self.grantLists = [];
                    self.grantFields = [];
                    self.selectRowButtonKeys=[];
                    self.selectRowListKeys = [];
                    self.selectRowFieldKeys = [];

                }
                FormBoListApi.getGrantJsonByKey(pmtId, boListKey).then(res => {
                    self.grantButtons=res['BUTTON'];
                    self.grantLists = res['LIST'];
                    self.grantFields = res['FIELD'];
                    if(res['BUTTON_Keys']) {
                        self.selectRowButtonKeys = res['BUTTON_Keys'];
                    }
                    if (res['LIST_Keys']) {
                        self.selectRowListKeys = res['LIST_Keys'];
                    }
                    if (res['FIELD_Keys']) {
                        self.selectRowFieldKeys = res['FIELD_Keys'];
                    }

                    if (res['groupNames']) {
                        self.groupNames = res['groupNames'];
                    }


                })
            },
            selectGroups(vm) {
                var _self = this;
                var conf = {curVm: this, data: {single: true,showDimId:true}, widthHeight: ['900px', '700px']};
                Dialog.openGroupDialog(conf, function (self, group) {
                    vm.setVal(group.groupId, group.name);
                    if(group.groupId){
                        _self.groupId = group.groupId;
                        self.getBoList(group.groupId);
                    }
                })
            },
            sendChangeValue() {
                var changeValues = {
                    value: this.valueList.values.join(","),
                    text: this.valueList.names.join(",")
                };
                this.$refs.valueList.setValues(changeValues, false);
            },
            getBoList(groupId){
                this.initListTree();
                this.initGroupTree();

                FormBoPmtApi.getBoList(groupId).then(res => {
                    var results = res.data, obj, data, datas = [];
                    if(results && results.length > 0){
                        for (var i = 0; i < results.length; i++) {
                            var obj = results[i];
                            data = {};
                            data.key = obj.id;
                            data.value = obj.id;
                            data.title = obj.name;
                            datas.push(data);
                        }

                        var top = {};
                        top.key="-1";
                        top.title=this.$ti18('list.dataList','数据列表','FormBoPmt');
                        top.children=datas;
                        this.treeDataList = [];
                        this.treeDataList.push(top);
                    }

                })
            },
            initListTree(){
                var top = {};
                top.key="-1";
                top.children=[];
                top.title=this.$ti18('list.dataList','数据列表','FormBoPmt');
                this.treeDataList = [];
                this.treeDataList.push(top);

            },
            onSelectList(selectedKeys,e){
                if(selectedKeys[0] != '-1'){
                    this.initGroupTree();
                    this.getPmtList(e.node.value, this.groupId);
                }

            },
            initGroupTree(){
                var top = {};
                top.key="-1";
                top.children=[];
                top.title=this.$ti18('list.dataAuthList','数据权限列表','FormBoPmt');
                this.treeDataGroup = [];
                this.treeDataGroup.push(top);

                this.grantLists = [];
                this.grantFields = [];
                this.selectRowListKeys = [];
                this.selectRowFieldKeys = [];
                this.groupNames = "";

            },
            onSelectGroup(selectedKeys,e){
                if(selectedKeys[0] != '-1'){
                    this.getPmt(selectedKeys[0], e.node.value);
                }

            },
            getPmtList(boListId, groupId){
                FormBoPmtApi.getList(boListId, groupId).then(res => {
                    var results = res.data, obj, data, datas = [];
                    if(results.length > 0){
                        for (var i = 0; i < results.length; i++) {
                            var obj = results[i];
                            data = {};
                            data.key = obj.pmtId;
                            data.value = obj.boListKey;
                            data.title = obj.name;
                            datas.push(data);
                        }

                        var top = {};
                        top.key="-1";
                        top.title=this.$ti18('list.dataAuthList','数据权限列表','FormBoPmt');
                        top.children=datas;
                        this.treeDataGroup = [];
                        this.treeDataGroup.push(top);
                    }

                })
            }

        }
    }
</script>
<style scoped>
    .tablist{
        display: flex!important;
        width: 100% !important;
        height: 100%;
    }
    .tablist >div:nth-child(1){
        width: 220px;
        overflow: auto;
        border-right: 1px solid #dfdfdf;
    }
    .tablist >div:nth-child(2){
      flex: 1;
        overflow: auto;
    }
    .SQL{
        border:1px solid #ddd;
        height: calc(100% - 30px);
        padding: 10px;
        margin-top: 10px;
        border-radius: 10px;
    }
    .tableTit {
        margin: 10px 10px 10px 0px;
        border-left: 2px solid #1890ff;
        padding-left: 6px;
        height: 14px;
        line-height: 14px;
    }

    *>>>.ant-table-row td:last-child .MyfixedBoxs {
        right: 10px;
    }
</style>
